<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
     table{
            width: 700px;
            margin: 50px;
            border: 1px solid #000;
            border-collapse: collapse;
            text-align: center;
        }
        caption{
            font-size: 20px;
            font-weight: bold;
            line-height: 60px;
        }
        th,td{
            border: 1px solid #000;
            padding: 10px 0;

        } 
</style>
<body>
    <script>
          //编程3
        let kayue = prompt('请输入银行卡余额：') ,shuifei = prompt('请输入水费：'),
         dianfei = prompt('请输入电费：'),wangfei = prompt('请输入网费')
         let str =`<table>
         <caption>
             黄中旺
         </caption>
         <tr>
             <th>银行卡余额</th>
             <th>水费</th>
             <th>电费</th>
             <th>网费</th>
             <th>银行卡余额</th>
         </tr>
         <tr>
             <td>${kayue}元</td>
             <td>${shuifei}元</td>
             <td>${dianfei}元</td>
             <td>${wangfei}元</td>
             <td>${+kayue-shuifei-dianfei-wangfei}元</td>
         </tr>    
     </table>`
     document.write(str)
    </script>
</body>
</html>